<template>
  <div class="bg-light">
    <div class="container-title">基础设置</div>
    <Form ref="form" :label-width="100" :rules="rule" :model="form">
      <Row class="pr">
        <i-col span="8">
          <FormItem label="促销名称" prop="name">
            <Input v-model="form.name" placeholder="请输入促销名称" :maxlength="15" />
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="使用期限" prop="date">
            <fomatDate
              v-model="form.date"
              :date-value="form.date"
            />
            <!-- <DatePicker
              type="datetimerange"
              v-model="form.date"
              :options="options"
              placeholder="请选择使用期限"
            ></DatePicker> -->
          </FormItem>
        </i-col>
      </Row>
      <!-- <Row class="pr">
        <Col span="8">
          <FormItem label="限制数量" prop="num">
            <RadioGroup v-model="form.num">
              <Radio label="1">部分商品参加</Radio>
              <Radio label="2">全部商品参加</Radio>
            </RadioGroup>
          </FormItem>
        </Col>
      </Row> -->
      <Row class="pr">
        <i-col span="8">
          <FormItem label="活动对象" prop="grade">
            <CheckboxGroup v-model="form.grade">
              <Checkbox v-for="item in storeTypeData" :key="item.id" :label="item.value">{{ item.text }}</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="促销类型">
            <Select v-model="form.term">
              <Option
                v-for="item in promotionType"
                :key="item.value"
                :value="item.value"
              >{{ item.label }}</Option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="24">
          <div v-if="$store.state.fullGiftSale.form.term==1" class="all-select col-li">
            <div class>
              <FormItem
                v-for="(item, index) in form.discountGift"
                :key="index"
                :label="index<1 ?'促销规则': ''"
                :prop="'discountGift.' + index + '.value'"
                :rules="{validator: validatefullGift, trigger: 'blur'}"
              >
                <span class="item-li">:满
                  <Input v-model="item.value" style="width:60px" placeholder :maxlength="5" />元
                </span>
              </FormItem>
            </div>
            <ul class="col-ul">
              <li v-for="(item, index) in form.discountGift" :key="index">
                <Button
                  v-show="index<1"
                  type="primary"
                  icon="md-add"
                  size="small"
                  class="mr"
                  @click="onAddGiftDiscount"
                />
                <Button
                  v-show="index>0"
                  type="primary"
                  icon="md-remove"
                  size="small"
                  class="mr"
                  @click="onReduceGiftDiscount(index)"
                />
                <!-- <span class="add">[<span>+</span>]</span>
                <span class="reduce">[<span>-</span>]</span>-->
                <Checkbox v-model="item.isParcel" class="item-li">包邮</Checkbox>
              </li>
            </ul>
          </div>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="24">
          <div v-if="$store.state.fullGiftSale.form.term==2" class="all-select col-li">
            <div class>
              <FormItem
                v-for="(item, index) in form.discount1"
                :key="index"
                :label="index<1 ?'促销规则': ''"
                :prop="'discount1.' + index + '.value'"
                :rules="{validator: validateFullgift1, trigger: 'blur'}"
              >
                <div class="item-li">:满
                  <Input v-model="item.value" style="width:60px" placeholder :maxlength="5" />元
                </div>
              </FormItem>
            </div>
            <div>
              <FormItem
                v-for="(item, index) in form.discount2"
                :key="index"
                class="col-left"
                :prop="'discount2.' + index + '.value'"
                :rules="{validator: validateAdd, trigger: 'blur'}"
              >
                <div class="item-li">加
                  <Input v-model="item.value" style="width:60px" placeholder :maxlength="5" />元
                </div>
              </FormItem>
            </div>
            <ul class="col-ul">
              <li v-for="(item, index) in form.discount1" :key="index">
                <Button
                  v-show="index<1"
                  type="primary"
                  icon="md-add"
                  size="small"
                  @click="onAddDiscount"
                />
                <Button
                  v-show="index>0"
                  type="primary"
                  icon="md-remove"
                  size="small"
                  @click="onReduceDiscount(index)"
                />
                <Checkbox v-model="item.isParcel" class="pl20">包邮</Checkbox>
                <!-- <span class="add">[<span>+</span>]</span>
                <span class="reduce">[<span>-</span>]</span>-->
              </li>
            </ul>
          </div>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="参与方式" prop="">
            <CheckboxGroup v-model="checked">
              <Checkbox v-for="item in gradeList" :key="item.id" disabled :label="item.id">{{ item.name }}</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="活动备注">
            <Input v-model="form.remarks" placeholder="活动备注" type="textarea" :maxlength="128" />
          </FormItem>
        </i-col>
      </Row>
    </Form>
  </div>
</template>
<script>
import fomatDate from '@/components/ChoseDateFormat'
import { validatemBody } from './DefaultEditItemMethods.js'
export default {
  components: {
    fomatDate
  },
  props: {
    form: {
      type: Object
    }
  },
  data () {
    return {
      checked: [1],
      gradeList: [{
        id: 1,
        name: '部分商品参加'
      }],
      options: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      promotionType: [
        {
          value: 1,
          label: '满赠促销'
        },
        {
          value: 2,
          label: '加价购促销'
        }
      ],
      termList: [
        {
          id: 1,
          name: '限IP/UDID'
        },
        {
          id: 2,
          name: '限帐号'
        }
      ],
      rule: {
        name: [{ required: true, message: '请输入促销名称', trigger: 'blur' }],
        date: [{ required: true,
          message: '请开始时间',
          trigger: 'change',
          type: 'array'
          // fields: {
          //   0: {type: 'date', required: true, message: '请输入起止日期'},
          //   1: {type: 'date', required: true, message: '请输入起止日期'}
          // }
        }],
        grade: [{ required: true, type: 'array', message: '请选择活动对象', trigger: 'change' }],
        term: [{ required: true, message: '请选择限购条件', trigger: 'blur' }],
        num: [{ required: true, message: '请选择限购数量', trigger: 'blur' }]
      }
    }
  },
  computed: {
    storeTypeData () {
      return this.$store.getters.storeTypeData
    }
  },
  mounted () {
    this.$store.dispatch('getStoreType')
  },
  methods: {
    validatefullGift (rule, value, callback) {
      validatemBody(rule, value, callback, this.$store.state.fullGiftSale.form.discountGift, { index: 'discountGift.1.value', index1: 'discountGift.2.value' })
    },
    validateFullgift1 (rule, value, callback) {
      validatemBody(rule, value, callback, this.$store.state.fullGiftSale.form.discount1, { index: 'discount1.1.value', index1: 'discount1.2.value' })
    },
    validateAdd (rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入金额'))
      } else {
        callback()
      }
    },
    validaten (rule, value, callback) {
      callback()
    },
    onReduceDiscount (index) {
      this.$store.commit('onfgsReduceDiscount', index)
    },
    onAddDiscount () {
      this.$store.commit('onfgsAddDiscount')
    },
    // 每满减
    onAddGiftDiscount () {
      this.$store.commit('onAddGiftDiscount')
    },
    // 没满减
    onReduceGiftDiscount (index) {
      this.$store.commit('onReduceGiftDiscount', index)
    }
  }
}
</script>
